<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-date"></i> 图表</el-breadcrumb-item>
                <el-breadcrumb-item>基础图表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="plugins-tips">
            vue-schart：vue.js封装sChart.js的图表组件。
            访问地址：<a href="https://github.com/lin-xin/vue-schart" target="_blank">vue-schart</a>
        </div>

      <!-- ECharts图表 饼状图 -->
      <div id="pieChart" :style="{width: '500px', height: '400px'}">

      </div>

        <!-- ECharts图表 折现图 -->
        <div id="barChart" :style="{width: '500px', height: '400px'}">

        </div>

        <!-- ECharts图表 折现图 -->
        <div id="barChart1" :style="{width: '500px', height: '400px'}">

        </div>

        <!-- ECharts图表 折现图 -->
        <div id="customePie" :style="{width: '500px', height: '400px'}">

        </div>
    </div>
</template>

<script>

    import {fetchDistrictRatio,fetchWorkYearRation,fetchFinanceStage,fetchSalaryRatio} from 'src/components/api/position'
    import Schart from 'vue-schart';

    export default {

        components: {
            Schart
        },
        data: () => ({
            data1: [
            ],
            xdata:[],
            ydata:[],
            xdata1:[],
            ydata1:[],
            customePie:[],
            options1: {
                title: '上海java后端职位区域分配图',
            },
            options2: {
                title: '上海java后端职位区域分配图',
                bgColor: '#607d8b',
                titleColor: '#ffffff',
                legendColor: '#ffffff'
            }
        }),
        created(){

        },
        mounted() {
              this.getPostionDistrict();
              this.getWorkYearRatio();
              this.getFianceStageRatio();
              this.getSalaryRatio();
        },
        methods:{
            getPostionDistrict() {
                fetchDistrictRatio({name: "1"}).then(response => {
                    this.data1 = response.data.data;

                    /*ECharts图表*/
                    var myChart = this.$echarts.init(document.getElementById('pieChart'));

                    myChart.setOption({
                        series: [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius: '55%',
                                itemStyle: {
                                    normal: {
                                        // 阴影的大小
                                        shadowBlur: 200,
                                        // 阴影水平方向上的偏移
                                        shadowOffsetX: 0,
                                        // 阴影垂直方向上的偏移
                                        shadowOffsetY: 0,
                                        // 阴影颜色
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },
                                data: this.data1
                            }
                        ]
                    })
                })
            },
            getWorkYearRatio(){
                fetchWorkYearRation().then(response => {
                    var data = response.data.data;

                    for(var key  in data){
                        this.xdata.push(data[key].name)
                        this.ydata.push(data[key].value)
                    }

                    /*ECharts图表*/
                    var myChart = this.$echarts.init(document.getElementById('barChart'));

                    myChart.setOption({
                        color: ['#3398DB'],
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : this.xdata,
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'直接访问',
                                type:'bar',
                                barWidth: '60%',
                                data:this.ydata
                            }
                        ]
                    })
                })
            },
            getFianceStageRatio(){
                fetchFinanceStage().then(response => {
                    var data = response.data.data;

                    for(var key  in data){
                        this.xdata1.push(data[key].name)
                        this.ydata1.push(data[key].value)
                    }

                    /*ECharts图表*/
                    var myChart = this.$echarts.init(document.getElementById('barChart1'));

                    myChart.setOption({
                        title: {
                            text: '上海公司融资情况',
                            subtext: '数据来自网络'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            data: ['2018年']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'value',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'category',
                            data: this.xdata1
                        },
                        series: [
                            {
                                name: '2018年',
                                type: 'bar',
                                data: this.ydata1
                            }
                        ]
                    })
                })
            },
            getSalaryRatio(){
                fetchSalaryRatio().then(response => {
                     this.customePie = response.data.data;

                    /*ECharts图表*/
                    var myChart = this.$echarts.init(document.getElementById('customePie'));

                    myChart.setOption({
                        backgroundColor: '#2c343c',

                        title: {
                            text: '上海java薪资情况',
                            left: 'center',
                            top: 20,
                            textStyle: {
                                color: '#ccc'
                            }
                        },

                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },

                        visualMap: {
                            show: false,
                            min: 80,
                            max: 600,
                            inRange: {
                                colorLightness: [0, 1]
                            }
                        },
                        series : [
                            {
                                name:'访问来源',
                                type:'pie',
                                radius : '55%',
                                center: ['50%', '50%'],
                                data:this.customePie.sort(function (a, b) { return a.value - b.value; }),
                                roseType: 'radius',
                                label: {
                                    normal: {
                                        textStyle: {
                                            color: 'rgba(255, 255, 255, 0.3)'
                                        }
                                    }
                                },
                                labelLine: {
                                    normal: {
                                        lineStyle: {
                                            color: 'rgba(255, 255, 255, 0.3)'
                                        },
                                        smooth: 0.2,
                                        length: 10,
                                        length2: 20
                                    }
                                },
                                itemStyle: {
                                    normal: {
                                        color: '#c23531',
                                        shadowBlur: 200,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                },

                                animationType: 'scale',
                                animationEasing: 'elasticOut',
                                animationDelay: function (idx) {
                                    return Math.random() * 200;
                                }
                            }
                        ]
                    })
                })
            }
        }
    }
</script>

<style scoped>
    .schart {
        width: 600px;
        display: inline-block;
    }

    .content-title {
        clear: both;
        font-weight: 400;
        line-height: 50px;
        margin: 10px 0;
        font-size: 22px;
        color: #1f2f3d;
    }

</style>